<template>
	<comp-navbar title="设备管理" bgColor="#fff" :fixed="true"></comp-navbar>
	<view class="equipment-wrap">
		<view class="list flex" v-for="(item,index) in list" :key="index">
			<view class="iconfont icon-dianying">
			</view>
			<view class="text">{{item.ExhibitionhallName}}({{item.statestr}})</view>
			<view class="btn-wrap flex">
				<view class="btn" @click="handleSetExhibitionhall(item.ID,1)">开机</view>
				<view class="btn red" @click="handleSetExhibitionhall(item.ID,2)">关机</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		request
	} from '@/utils/request.js'

	const list = ref([{
		icon: 'icon-dianying',
		ExhibitionhallName: '老电影厅'
	}, {
		icon: 'icon-dianying',
		ExhibitionhallName: '青浦展厅'
	}, {
		icon: 'icon-dianying',
		ExhibitionhallName: '测试'
	}])

	// {
	//      "ID": 1,
	//      "ExhibitionhallName": "深圳展厅", //名称
	//      "bgImg": "Upload/Tables/SZ_ChannelExhibitionHall/202409171533505353/3.jpg", 
	//      "state": 1,                      //状态1禁用中、2使用中、3空闲
	//      "statestr": "禁用中",             //状态描述 禁用中、使用中、空闲
	//      "SYcount": 0 
	//    }

	const getExhibitionhall = async () => {
		try {

			const res = await request({
				method: 'GET',
				url: '/SZ_ChannelExhibitionHall/GetExhibitionhall'
			})
			list.value = res.Data
		} catch (e) {
			//TODO handle the exception
		}
	}

	// /api/SZ_ChannelExhibitionHall/SetExhibitionhall
	const handleSetExhibitionhall = async (id, type) => {
		try {

			const res = await request({
				method: 'GET',
				url: '/SZ_ChannelExhibitionHall/SetExhibitionhall',
				data: {
					id,
					para: type
				}
			})
			// if (res.Status) {
			// 	if (type == 1) {
			// 		uni.$u.toast('开机成功')
			// 	} else {
			// 		uni.$u.toast('关机成功')
			// 	}
			// 	uni.$u.toast('关机成功')
			// } else {
			// 	uni.$u.toast(res.Message)
			// }
			uni.$u.toast(res.Message)
		} catch (e) {
			//TODO handle the exception
		}
	}

	onMounted(() => {
		getExhibitionhall()
	})
</script>

<style lang="scss" scoped>
	.equipment-wrap {
		padding: 120rpx 20rpx 0 20rpx;
		color: $base-color;

		.list {
			height: 120rpx;
			line-height: 120rpx;
			border-bottom: 1rpx solid $base-color;



			.text {
				margin-left: 8rpx;
			}

			.btn-wrap {
				margin-left: auto;

				.btn {
					width: 100rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					font-size: 24rpx;
					color: #fff;
					background-color: green;
					border-radius: 10rpx;

					&.red {
						margin-left: 20rpx;
						background-color: red;
					}
				}
			}
		}
	}
</style>